<template>
  <div v-show="isShowPcase&&cHei" class="p_case">
    <div class="p_case_TopBg">

      <ul class="p_case_Top">
        <li>
          <h1>
            <span>
              免费版
            </span>
          </h1>
          <div class="txt_00">
            购买年费/终身会员，领取年费会员专享礼包
          </div>
          <div class="btn_00">
            立即使用
          </div>
        </li>
        <li>
          <h1>
            <span>
              个人VIP
            </span>
            <strong>￥16.6</strong>
            <span>
              /月
            </span>
          </h1>
          <div class="btn_01">
              立即购买
            </div>

        </li>
        <li>
          <h1>
              <span>
                企业版
              </span>
            </h1>
            <div class="btn_02">
                敬请期待
              </div>

        </li>
      </ul>

    </div>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        isShowPcase:false
      }
    },
    props:["cHei"],
    watch:{
      $route:{
          //https://blog.csdn.net/qq_40323256/article/details/101907326
      		handler:function(n_val,o_val){
      			console.log("n_val:",n_val.path);
            let that=this;
            if(n_val.path=="/purchase"){
              that.isShowPcase=true;
            }else{
              that.isShowPcase=false;
            }
      		},
      		deep:true,
          immediate:true
      }
    },

  }
</script>

<style lang="less" scoped="scoped">
  .p_case{
    		  position: fixed;
    		  top: 59px;
    		  left: 0;
    		  width: 100%;
    		  background: #fff;
    		  box-shadow:0 0 8px #ccc;
    		  z-index: 2;
    .p_case_TopBg{
    		  padding: 20px 0;
    		  .p_case_Top{
    			  width: 930px;
    			  margin: 0 auto;
    			  display: flex;
    			  flex-direction: row;
    			  li{
    				  flex: 1;
    				  display: flex;
    				  flex-direction: column;
    				  justify-content: center;
    				  position: relative;
    				  h1{
    					  display: flex;
    					  flex-direction: row;
    					  justify-content: center;
    					  font-weight: normal;
    					  span{
    						  display: block;
    						      font-size: 21px;
    						      color: #303133;
    						      letter-spacing: .4px;
    							  line-height: 24px;
    					  }
    					  strong{
    						  display: block;
    						  font-size: 21px;
    						      color: red;
    						  letter-spacing: .4px;
    						  line-height: 24px;
    					  font-weight: normal;

    					  }
    				  }

    				  .txt_00{
    					      margin-top: 8px;
    					      font-size: 10px;
    					      color: #f0453e;
    					      letter-spacing: .19px;
    						  text-align: center;
    				  }

    				  .btn_00{
    					      width: 140px;
    					      height: 32px;
    						  line-height: 32px;
    					      border: 1px solid #dbb98d;
    					      border-radius: 5px;
    					      margin: 6px auto 0;
    					      cursor: pointer;
    					      color: #dbb98d;
    						  text-align: center;
    				  }
    				  .btn_01{
    				      width: 140px;
    				      height: 32px;
    						  line-height: 32px;
    				      border: 1px solid #dbb98d;
    				      border-radius: 5px;
    					      margin:20px auto 0;
    				      cursor: pointer;
    				      color: #dbb98d;
    					  text-align: center;
    					  background: #303133;
    				  }

    				  .btn_02{
    					      width: 140px;
    					      height: 32px;
    						  line-height: 32px;
    					      cursor: pointer;
    					      border-radius: 5px;
    					      margin:20px auto 0;
    					      border: 1px solid #818181!important;
    					      background: #fff!important;
    					      color: #818181!important;
    					      box-shadow: none!important;
    						  text-align: center;
    				  }


    				  .btn_00:hover{
    					  background: #dbb98d;
    					  color: #fff;
    				  }

    			  }

    			  li:not(:last-child):after{
    				  content: "";
    				  position: absolute;
    				  width: 1px;
    				  height: 100%;
    				  top: 0;
    				  right: 0;
    				  background: #e2e5eb;
    			  }
    		  }
    }
  }

@media screen and (max-width:767px){
  .p_case{
    display: none !important;
  }
}
</style>
